<template>
    <div>
        <Nav></Nav>
        <div class="common">
            <Crumbs :get-nav-data="nav"></Crumbs>

            <img src="../assets/img/ad.4c6b6225.png" alt="" style="margin:20px 0">


            <div class="sort">
                <div class="t">
                    <ul>排序：
                        <li v-for="(item, index) in option" :key="index" :class="{ inyes: current == index }"
                            @click="clickHandle(index)">{{ item.txt }}</li>
                    </ul>
                </div>
                <div class="b">
                    <ul>分类：
                        <li v-for="(item, index) in option2" :key="index" :class="{ inyes: current2 == index }"
                            @click="clickHandle2(index)">{{ item.txt }}
                        </li>

                    </ul>
                </div>
            </div>

            <div class="shop">
                <ShopGoods v-for="items in data" :key="items.id" :name="items.name" :id="items.id"
                    :coverImg="items.coverImg" :coin="items.coin"></ShopGoods>
                <div v-if="data == 0" class="null">暂无商品</div>
            </div>
        </div>

    </div>
</template>

<script>
import Nav from '@/components/Nav'
import Crumbs from '@/components/Crumbs'
import Sort from '@/components/Sort'
import ShopGoods from '@/components/ShopGoods'
import { getData, getGoodsFun, getMoreFun } from "@/request/api";

export default {
    components: {
        Nav,
        Crumbs,
        ShopGoods,
        Sort,
        Sort
    },
    data() {
        return {
            nav: [
                { link: '#', name: '首页' },
                { link: '#', name: '' },
            ],
            params: {//默认请求的参数
                did: 0,
                type: 0,
                min: 0,
                max: 0,
                keyword: ''
            },

            data: [],
            option: [
                { min: 0, max: 100000, txt: "全部" },
                { min: 0, max: 0, txt: "我能兑换的" },
                { min: 0, max: 1000, txt: "0-1000个" },
                { min: 1000, max: 2500, txt: "1000-2500个" },
                { min: 2500, max: 6500, txt: "2500-6500个" },
                { min: 6500, max: 10000, txt: "6500-10000个" },
            ],
            option2: [
                { type: 0, txt: "全部" },
                { type: 1, txt: "实物礼品" },
                { type: 2, txt: "虚拟礼品" },
            ],
            current: 0,
            current2: 0,

        }
    },
    created() {
        let name = this.$route.query.name

        // name 为 null 则是全部商品
        this.nav[1].name = name || '全部礼品'
        // console.log(this.parmas);

        // 先进行一次数据请求用来搜索
        this.getRequest()

        // this.initListAll('')
    },
    methods: {
        async getRequest() {
            if (this.$route.query.keyword) {
                this.params.keyword = this.$route.query.keyword
            }
            // console.log(this.params.keyword);
            let res = await getGoodsFun(this.params)
            console.log(res);
            this.data = res.data.data;
            // console.log(res.data);
        },
        // async initListAll(id) {
        //     const { data: res } = await getData(id)
        //     // console.log(res.data);
        //     this.data = res.data
        // },
        clickHandle(val) {
            this.current = val
            this.params.min = this.option[val].min;
            this.params.max = this.option[val].max;
            this.getRequest()
        },
        clickHandle2(val) {
            this.current2 = val
            this.params.type = this.option2[val].type;
            this.getRequest()
        },
    }
}
</script>

<style lang="less" scoped>
.common {
    margin-top: 50px;

    .shop {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20px;

        div {
            margin-right: 20px;

            &:nth-child(4n) {
                margin-right: 0px;
            }
        }
        .null{
            margin:100px auto;
        }
    }

    .inyes {
        color: #00329b !important;
    }

    .sort {
        font-size: 16px;

        li {
            color: #999999;
            cursor: pointer;
        }

        .t ul {
            display: flex;
            padding: 20px 0;

            li {
                padding: 0 15px;
                cursor: pointer;

            }
        }

        .b ul {
            display: flex;
            padding: 20px 0;

            li {
                padding: 0 15px;
            }
        }
    }
}
</style>